import React, { useEffect, useRef, useState } from 'react';
import './SearchBox.css';
import { ReactComponent as CleanImg } from "../../common/svg/clean.svg";
import { ReactComponent as SearchBtn } from "../../common/svg/searchbtn.svg";
import { Link } from 'react-router-dom';

import { totalVideos } from '../../utils/utils';

const SearchPanel = React.lazy(() => import("./SearchPanel"));

function SearchBox({ visible = true, oldSearchField = "", setOuterSearchList = "", setOuterSearchField = "" }) {

  const [isFocus, setIsFocus] = useState(false);
  const [searchField, setSearchField] = useState("");
  const [searchList, setSearchList] = useState([]);
  const searchRef = useRef();

  useEffect(() => {
    if (isFocus) {
      document.addEventListener("click", clickCallback, false);
    }
    return () => {
      document.removeEventListener("click", clickCallback, false);
    }
  }, [isFocus])

  const clickCallback = (e) => {
    if (searchRef.current && searchRef.current.contains(e.target)) {
      return;
    }
    onBlur();
  }

  useEffect(() => {
    if (oldSearchField != "") {
      setSearchField(oldSearchField);
      searchRef.current.querySelector(".search-input").value = oldSearchField;
    }
  }, [])

  const onFocus = () => {
    setIsFocus(true);
    let searchform = searchRef.current.querySelector(".searchform");
    searchRef.current.setAttribute("class", "search-bar is-focus");
    searchform.getElementsByTagName("input")[0].setAttribute("class", "search-input is-focus");
    searchform.setAttribute("class", "searchform is-focus");
  }

  const onBlur = () => {
    if (!searchRef.current) {
      return;
    }
    setIsFocus(false);
    let searchform = searchRef.current.querySelector(".searchform");
    searchRef.current.setAttribute("class", "search-bar");
    searchform.getElementsByTagName("input")[0].setAttribute("class", "search-input");
    searchform.setAttribute("class", "searchform");
  }

  const cleanText = () => {
    searchRef.current.querySelector(".search-input").value = "";
    setSearchField("");
    setSearchList([]);
  }

  const handleSearchChange = (e) => {
    setSearchField(e.target.value);
    if (setOuterSearchList != "") {
      setOuterSearchField(e.target.value);
    }
    if (e.target.value == "") {
      setSearchList([]);
      return;
    }
    setSearchList(Object.entries(totalVideos).filter(([key, value], index) => {
      return value.title.includes(e.target.value);
    }));
    if (setOuterSearchList != "") {
      setOuterSearchList(Object.entries(totalVideos).filter(([key, value], index) => {
        return value.title.includes(e.target.value);
      }));
    }
  }

  return (
    <div className="search-bar" ref={searchRef} onFocus={onFocus} style={{ display: `${visible ? "" : "none"}` }} >
      <form className="searchform">
        <div className="search-content">
          <input type="text" className="search-input" onChange={handleSearchChange} />
          <div className="search-clean">
            {searchField.length == 0 ? "" : <CleanImg onClick={cleanText} />}
          </div>
          <Link to={`/search/${searchField}`} className="search-btn">
            <SearchBtn />
            <input type="submit" value="" style={{ display: "none" }} />
          </Link>
        </div>
      </form>
      <SearchPanel isVisible={isFocus} searchList={searchList} searchField={searchField} setSearchField={setSearchField} />
    </div>
  )
}

export default SearchBox;